<template>
    <el-row>
        <el-col :span="8" :offset="16">
            <div style="background-color: #ffffff">
                <el-date-picker
                    v-model="dateValue"
                    type="daterange"
                    range-separator="To"
                    start-placeholder="Start date"
                    end-placeholder="End date"
                    size="default"
                />
                <el-button @click="chooseDate" type="primary">
                    定制表格
                    <el-icon class="el-icon--right">
                        <svg
                            class="icon"
                            viewBox="0 0 1024 1024"
                            xmlns="http://www.w3.org/2000/svg"
                            width="300"
                            height="300"
                        >
                            <path
                                d="M355.7 631.5l431.1-431.1c10.8-10.8 28.4-10.8 39.2 0 10.8 10.8 10.8 28.4 0 39.2L394.9 670.7c-10.8 10.8-28.4 10.8-39.2 0-10.8-10.8-10.8-28.4 0-39.2zM724 524.3c0-15.3 12.4-27.7 27.7-27.7 15.3 0 27.7 12.4 27.7 27.7V746c0 61.2-49.6 110.8-110.8 110.8H280.7c-61.2 0-110.8-49.6-110.8-110.8V358c0-61.2 49.6-110.8 110.8-110.8h221.7c15.3 0 27.7 12.4 27.7 27.7 0 15.3-12.4 27.7-27.7 27.7H280.7c-30.6 0-55.4 24.8-55.4 55.4v388c0 30.6 24.8 55.4 55.4 55.4h387.9c30.6 0 55.4-24.8 55.4-55.4V524.3z"
                            ></path>
                        </svg>
                    </el-icon>
                </el-button>

                <!--   <el-button type="primary">
                    下载
                    <el-icon class="el-icon&#45;&#45;right"><svg  class="icon" viewBox="0 0 1024 1024"  xmlns="http://www.w3.org/2000/svg"  width="200" height="200"><path d="M995.84 1024 28.16 1024C12.8 1024 0 1011.2 0 995.84l0 0c0-15.36 12.8-28.16 28.16-28.16l967.68 0c15.36 0 28.16 12.8 28.16 28.16l0 0C1024 1011.2 1011.2 1024 995.84 1024z" p-id="4278"></path><path d="M926.72 376.32 926.72 376.32c-10.24-10.24-30.72-10.24-40.96 0L537.6 721.92 537.6 28.16C537.6 12.8 527.36 0 512 0s-25.6 12.8-25.6 28.16l0 693.76L138.24 376.32c-10.24-10.24-30.72-10.24-40.96 0-10.24 10.24-10.24 28.16 0 40.96l394.24 394.24c2.56 2.56 2.56 2.56 5.12 2.56 0 0 2.56 2.56 2.56 2.56 7.68 2.56 15.36 2.56 23.04 0 2.56 0 2.56-2.56 2.56-2.56 2.56 0 5.12-2.56 5.12-2.56l394.24-394.24C936.96 404.48 936.96 386.56 926.72 376.32z" p-id="4279"></path></svg></el-icon>
                </el-button>-->
            </div>
        </el-col>
    </el-row>

    <el-row>
        <el-col :span="11" style="height: 655px">
            <div
                id="bar"
                ref="barChart"
                style="height: 50%; background-color: #ffffff"
            ></div>

            <el-row style="height: 50%">
                <el-col
                    :span="6"
                    style="height: 100%; background-color: #66b1ff"
                >
                    <div
                        id="pie1"
                        ref="pieChart1"
                        style="height: 100%; background-color: #ffffff"
                    ></div>
                </el-col>
                <el-col
                    :span="6"
                    style="height: 100%; background-color: #66b1ff"
                >
                    <div
                        id="pie2"
                        ref="pieChart2"
                        style="height: 100%; background-color: #ffffff"
                    ></div>
                </el-col>
                <el-col
                    :span="6"
                    style="height: 100%; background-color: #66b1ff"
                >
                    <div
                        id="pie3"
                        ref="pieChart3"
                        style="height: 100%; background-color: #ffffff"
                    ></div>
                </el-col>
                <el-col
                    :span="6"
                    style="height: 100%; background-color: #66b1ff"
                >
                    <div
                        id="pie4"
                        ref="pieChart4"
                        style="height: 100%; background-color: #ffffff"
                    ></div>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="13">
            <div
                id="map"
                ref="mapChart"
                style="height: 90%; background-color: #ffffff"
            ></div>
        </el-col>
    </el-row>
</template>

<script>
import { onMounted, ref, getCurrentInstance, watch } from "vue";
import * as echarts from "echarts";
import china from "@/assets/china.json";
import { ElMessageBox } from "element-plus";

export default {
    methods: {},

    data() {
        return {
            value1: ["2022-12-11", "2024-12-11"], // 初始日期为当前日期
        };
    },

    name: "MyChart",
    setup() {
        const barChart = ref(null);
        const pieChart1 = ref(null);
        const pieChart2 = ref(null);
        const pieChart3 = ref(null);
        const pieChart4 = ref(null);
        const mapChart = ref(null);
        const dateValue = ref([new Date("2022-12-11"), new Date("2024-12-11")]);

        var start = "2022-12-11";
        var end = "2024-12-11";
        var maxValue = 50;

        const { proxy } = getCurrentInstance();
        const barData = ref([]);
        const pieData = ref([]);
        const mapData = ref([]);

        barData.value = [];
        pieData.value = [];
        mapData.value = [];

        onMounted(async () => {
            let result = await proxy.Request({
                url: proxy.Api.getBarChartData,
                params: {
                    start: start,
                    end: end,
                },
            });
            barData.value = result.data;
            console.log(barData);

            result = await proxy.Request({
                url: proxy.Api.getPieChartData,
                params: {
                    start: start,
                    end: end,
                },
            });
            pieData.value = result.data;
            console.log(pieData);

            result = await proxy.Request({
                url: proxy.Api.getMapChartData,
                params: {
                    start: start,
                    end: end,
                },
            });
            mapData.value = result.data;
            console.log(mapData);
            maxValue = Math.max(...mapData.value.map((item) => item.value));
            console.log(maxValue);
        });

        const chooseDate = async () => {
            console.log(12345);
            console.log(dateValue.value[0]);
            let start = new Date(dateValue.value[0]).toLocaleDateString(
                "en-CA"
            );
            let end = new Date(dateValue.value[1]).toLocaleDateString("en-CA");
            let result = await proxy.Request({
                url: proxy.Api.getBarChartData,
                params: {
                    start: start,
                    end: end,
                },
            });
            barData.value = result.data;
            console.log(barData);
            console.log(123);
            result = await proxy.Request({
                url: proxy.Api.getPieChartData,
                params: {
                    start: start,
                    end: end,
                },
            });
            pieData.value = result.data;
            console.log(pieData);

            result = await proxy.Request({
                url: proxy.Api.getMapChartData,
                params: {
                    start: start,
                    end: end,
                },
            });
            mapData.value = result.data;
            maxValue = Math.max(...mapData.value.map((item) => item.value));
            console.log(maxValue);
        };

        watch([barData, pieData, mapData], () => {
            if (barChart.value) {
                const myBarChart = echarts.init(barChart.value);

                const option = {
                    title: {
                        text: "月份经费总额统计",
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                        },
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            saveAsImage: { show: true },
                        },
                    },
                    grid: {
                        left: "3%",
                        right: "4%",
                        bottom: "3%",
                        containLabel: true,
                    },
                    xAxis: [
                        {
                            type: "category",
                            data: barData.value.map((item) => item.date),
                            axisTick: {
                                alignWithLabel: true,
                            },
                        },
                    ],
                    yAxis: [
                        {
                            type: "value",
                            axisLabel: {
                                formatter: "{value}",
                            },
                        },
                    ],
                    series: [
                        {
                            name: "Expenses",
                            type: "bar",
                            barWidth: "60%",
                            data: barData.value.map((item) => item.count),
                            itemStyle: {
                                color: "#66b1ff",
                            },
                        },
                    ],
                };

                myBarChart.setOption(option);
            }

            if (pieChart1.value) {
                const myPieChart = echarts.init(pieChart1.value);

                const option = {
                    title: {
                        text: "出差申请通过率",
                        textStyle: {
                            fontSize: 13,
                        },
                        top: "2%",
                    },

                    tooltip: {
                        trigger: "item",
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            saveAsImage: { show: true },
                        },
                    },
                    legend: {
                        top: "14%",
                        left: "center",
                    },
                    series: [
                        {
                            name: "Access From",
                            type: "pie",
                            radius: ["40%", "70%"],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: "center",
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 30,
                                    fontWeight: "bold",
                                    color: "black",
                                },
                            },
                            labelLine: {
                                show: false,
                            },
                            data: [
                                {
                                    value: pieData.value.travelApprovalPassNum,
                                    name: "Pass",
                                    itemStyle: {
                                        color: "#FF6347",
                                    },
                                },
                                {
                                    value: pieData.value
                                        .travelApprovalNoPassNum,
                                    name: "No Pass",
                                    itemStyle: {
                                        color: "#4682B4",
                                    },
                                },
                            ],
                        },
                    ],
                };

                myPieChart.setOption(option);
            }

            if (pieChart2.value) {
                const myPieChart = echarts.init(pieChart2.value);

                const option = {
                    title: {
                        text: "预支款申请通过率",
                        textStyle: {
                            fontSize: 13,
                        },
                        top: "2%",
                    },

                    tooltip: {
                        trigger: "item",
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            saveAsImage: { show: true },
                        },
                    },
                    legend: {
                        top: "14%",
                        left: "center",
                    },
                    series: [
                        {
                            name: "Access From",
                            type: "pie",
                            radius: ["40%", "70%"],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: "center",
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 30,
                                    fontWeight: "bold",
                                    color: "black",
                                },
                            },
                            labelLine: {
                                show: false,
                            },
                            data: [
                                {
                                    value: pieData.value.advanceApprovalPassNum,
                                    name: "Pass",
                                    itemStyle: {
                                        color: "#FF6347",
                                    },
                                },
                                {
                                    value: pieData.value
                                        .advanceApprovalNoPassNum,
                                    name: "No Pass",
                                    itemStyle: {
                                        color: "#4682B4",
                                    },
                                },
                            ],
                        },
                    ],
                };

                myPieChart.setOption(option);
            }

            if (pieChart3.value) {
                const myPieChart = echarts.init(pieChart3.value);

                const option = {
                    title: {
                        text: "经理审批通过率",
                        textStyle: {
                            fontSize: 13,
                        },
                        top: "2%",
                    },

                    tooltip: {
                        trigger: "item",
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            saveAsImage: { show: true },
                        },
                    },
                    legend: {
                        top: "14%",
                        left: "center",
                    },
                    series: [
                        {
                            name: "Access From",
                            type: "pie",
                            radius: ["40%", "70%"],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: "center",
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 30,
                                    fontWeight: "bold",
                                    color: "black",
                                },
                            },
                            labelLine: {
                                show: false,
                            },
                            data: [
                                {
                                    value: pieData.value
                                        .reimbursementApprovalMaPassNum,
                                    name: "Pass",
                                    itemStyle: {
                                        color: "#FF6347",
                                    },
                                },
                                {
                                    value: pieData.value
                                        .reimbursementApprovalMaNoPassNum,
                                    name: "No Pass",
                                    itemStyle: {
                                        color: "#4682B4",
                                    },
                                },
                            ],
                        },
                    ],
                };

                myPieChart.setOption(option);
            }

            if (pieChart4.value) {
                const myPieChart = echarts.init(pieChart4.value);

                const option = {
                    title: {
                        text: "财务审批通过率",
                        textStyle: {
                            fontSize: 13,
                        },
                        top: "2%",
                    },

                    tooltip: {
                        trigger: "item",
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            saveAsImage: { show: true },
                        },
                    },
                    legend: {
                        top: "14%",
                        left: "center",
                    },
                    series: [
                        {
                            name: "Access From",
                            type: "pie",
                            radius: ["40%", "70%"],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: "center",
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 30,
                                    fontWeight: "bold",
                                    color: "black",
                                },
                            },
                            labelLine: {
                                show: false,
                            },
                            data: [
                                {
                                    value: pieData.value
                                        .reimbursementApprovalFiPassNum,
                                    name: "Pass",
                                    itemStyle: {
                                        color: "#FF6347",
                                    },
                                },
                                {
                                    value: pieData.value
                                        .reimbursementApprovalFiNoPassNum,
                                    name: "No Pass",
                                    itemStyle: {
                                        color: "#4682B4",
                                    },
                                },
                            ],
                        },
                    ],
                };

                myPieChart.setOption(option);
            }

            if (mapChart.value) {
                const myMapChart = echarts.init(mapChart.value);

                echarts.registerMap("china", china);
                const mapOption = {
                    backgroundColor: "#ffffff",
                    title: {
                        text: "各省份出差人数统计",
                        left: "center",
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            saveAsImage: { show: true },
                            /*myTool: {
                                    show: true,
                                    title: 'Switch',
                                    icon: 'path://M118.656 438.656a32 32 0 0 1 0-45.248L416 96l4.48-3.776a32 32 0 0 1 40.768 3.776l3.712 4.48a32.064 32.064 0 0 1-3.712 40.832L218.56 384H928a32 32 0 0 1 0 64H141.248a32 32 0 0 1-22.592-9.344zM64 608a32 32 0 0 1 32-32h786.752a32 32 0 0 1 22.656 54.592L608 928l-4.48 3.776a32.064 32.064 0 0 1-40.832-49.024L805.632 640H96a32 32 0 0 1-32-32z', 'stroke-width': 0.5,
                                    onclick: function () {
                                        chooseDate();
                                        currentOption = (currentOption === mapOption) ? barOption : mapOption;
                                        myMapChart.setOption(currentOption, true);

                                    }
                                }*/
                        },
                    },
                    tooltip: {
                        trigger: "item",
                        showDelay: 0,
                        transitionDuration: 0.2,
                    },
                    visualMap: {
                        left: "right",
                        min: 0,
                        max: 50 + maxValue,
                        inRange: {
                            // prettier-ignore
                            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'],
                        },
                        text: ["High", "Low"],
                        calculable: true,
                    },
                    series: [
                        {
                            type: "map",
                            name: "出差人数",
                            map: "china",
                            zoom: 1.5,
                            center: [104.114129, 37.550339],
                            animation: true, // 启用动画
                            animationDuration: 1500, // 初始动画持续时间
                            animationEasing: "cubicOut", // 初始动画的缓动效果
                            animationDurationUpdate: 1000,
                            itemStyle: {
                                normal: {
                                    borderColor: "#5089ec",
                                    borderWidth: 1,
                                    areaColor: {
                                        type: "radial",
                                        x: 0.5,
                                        y: 0.5,
                                        r: 0.8,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "rgba(0,102,154,0)",
                                            },
                                            {
                                                offset: 1,
                                                color: "rgba(0,102,154,4)",
                                            },
                                        ],
                                    },
                                },
                                emphasis: {
                                    areaColor: "#2386ad",
                                    borderWidth: 0,
                                },
                            },
                            label: {
                                normal: { show: false },
                                emphasis: { textStyle: { color: "white" } },
                            },
                            roam: true,
                            emphasis: {
                                label: {
                                    show: true,
                                },
                            },
                            data: mapData.value,
                        },
                    ],
                };

                const barOption = {
                    xAxis: {
                        type: "value",
                    },
                    yAxis: {
                        type: "category",
                        axisLabel: {
                            rotate: 30,
                        },
                        data: mapData.value.map((item) => item.name),
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            saveAsImage: { show: true },
                            /*myTool: {
                                    show: true,
                                    title: 'Switch',
                                    icon: 'path://M118.656 438.656a32 32 0 0 1 0-45.248L416 96l4.48-3.776a32 32 0 0 1 40.768 3.776l3.712 4.48a32.064 32.064 0 0 1-3.712 40.832L218.56 384H928a32 32 0 0 1 0 64H141.248a32 32 0 0 1-22.592-9.344zM64 608a32 32 0 0 1 32-32h786.752a32 32 0 0 1 22.656 54.592L608 928l-4.48 3.776a32.064 32.064 0 0 1-40.832-49.024L805.632 640H96a32 32 0 0 1-32-32z', 'stroke-width': 0.5,
                                    onclick: function () {

                                        changeChart()
                                    }
                                }*/
                        },
                    },
                    series: {
                        type: "bar",
                        id: "population",
                        data: mapData.value.map((item) => item.value),
                        universalTransition: true,
                    },
                };

                let currentOption = mapOption;
                myMapChart.setOption(currentOption);

                /*function changeChart(){
                        currentOption = (currentOption === mapOption) ? barOption : mapOption;
                        myMapChart.setOption(currentOption, true);
                    }*/
                setInterval(function () {
                    currentOption =
                        currentOption === mapOption ? barOption : mapOption;
                    myMapChart.setOption(currentOption, true);
                }, 4000);
            }
        });

        return {
            barChart,
            pieChart1,
            pieChart2,
            pieChart3,
            pieChart4,
            mapChart,
            dateValue,
            chooseDate,
        };
    },
};
</script>

<style scoped></style>
